.animated {
  animation: dashAnimation 2s linear infinite;
  stroke-dasharray: 5;
}

@keyframes dashAnimation {
  from {
    stroke-dashoffset: 10;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.edgeLabel {
  font-size: 12px;
  fill: #666;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white;
}

.edgePath {
  stroke-width: 2px;
  fill: none;
  pointer-events: visibleStroke;
  cursor: pointer;
}

.edgePath:hover {
  stroke-width: 3px;
}

.marker {
  fill: currentColor;
}

.edgeDeleteButton {
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  transform-origin: center;
  pointer-events: all;
}

.edgeGroup:hover .edgeDeleteButton {
  opacity: 1;
}

.edgeDeleteButton:hover {
  transform: scale(1.2);
  fill: #ff4d4f;
}

.edgeDeleteButtonBackground {
  fill: #fff;
  stroke: #ff4d4f;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.1));
} 